<template>
  <div  v-show="show" v-cloak>
    <div>
      <Header ref="header"></Header>
    </div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div class="search">
            <div class="pruduce_kl">
              <div class="pruduce_k" @click="producebank">
                <span>精准搜索</span>
                <img src="../../static/image/sy_33.png" alt="" v-if="catesta">
                <img src="../../static/image/xiayibu.png" alt="" v-else>
              </div>
              <span v-if="cateList.length > 0">已选条件:</span>
              <ul>
                <li v-for="(item,index) in cateList" @click="clearcate(index)">
                  {{item.name}}
                  <img src="../../static/image/x_0.png" alt="">
                </li>
                <li class="clearall" v-if="cateList.length > 1" @click="clearall">
                  全部清除
                </li>
              </ul>
            </div>
            <div class="pro_kl"  v-if="catesta">
              <div class="prodceli" v-for="(item,index) in SearchCateList">
                <span>{{item.ca_name}}:</span>
                <ul>
                  <li :class="{'active' : cateindex[index] == -1}" @click="selectALL(item,index)">全部</li>
                  <li :class="{'active' : cateindex[index] == indes}" v-for="(items,indes) in item.list" @click="SearchCateClick(item,items.ca_name,items.ca_id,index,indes)">{{items.ca_name}}</li>
                </ul>
              </div>
            </div>

          </div>
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="car-info">
            <div class="right right-module">
              <div>
                <VehicleRight :mo_id="moId" :cate="catename" :mo_name="moName" :ca_id="caId"></VehicleRight>
              </div>
            </div>
            <div class="answer_lo">
              <div v-if="searchList.length > 0">
                <ul class="brand_ul2 brand_service_ul">
                  <li v-for="(item,index) in searchList" @click="prodcedetail(item.mo_id)">
                    <img src="../../static/image/e_1111.png" alt="" class="ve_img">
                    <img :src="item.mo_image" alt="">
                    <div>
                      <span class="hot" v-if="index <= 2">热</span>
                      <h3 v-html="item.mo_name"></h3>
                      <div class="car_li">
                        <span>能源:{{item.energy_name}}</span>
                        <span>结构:{{item.mo_car_body}}</span>
                        <span>排量:{{item.displacement_name}}</span>
                      </div>
                      <div class="car_li">
                        <span>级别:{{item.level_name}}</span>
                        <span>变速箱:{{item.gearbox_name}}</span>
                      </div>
                      <div class="car_li">
                        <span>销量:{{item.mo_sales}}</span>
                        <h3>价格：<span>{{item.mo_guide_price}}</span></h3>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="pageul">
                  <Page :total="count" :page-size="limit"  prev-text="上一页" next-text="下一页" show-total @on-change="changepage"></Page>
                </div>
              </div>
              <div v-else class="nocontent">
                暂无内容
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
  import VehicleRight from './VehicleRight'
//  import store from './store/index.js'
  export default {
    name: 'revehicle',
    components: {
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs,
      'VehicleRight': VehicleRight
    },
    data () {
      return {
        getSearchCateListAjax: true,
        type: '',
        name: '',
        count: 0,
        cate: '',
        skey: '',
        ca_id: '',
        CarCateList: [],
        vehicleList: [],
        role: '',
        page: 0,
        limit: 6,
        show: false,
        getEvaluationListAjax: true,
        getCarCateListAjax: true,
        SearchCateList: [],
        cateList: [],
        catetypeList: [],
        catesta: true,
        searchAjax: true,
        searchList: [],
        cateindex: []
      }
    },
    computed: {
      caId: function () {
        return ''
      },
      moId: function () {
        return ''
      },
      catename: function () {
        return this.cate
      },
      moName: function () {
        return ''
      }
    },
    created: function () {
      this.verify()
    },
    activated: function () {
      this.cateindex = []
      this.cateList = []
      this.catetypeList = []
      this.page = 0
      this.catesta = true
      this.verify()
    },
    mounted: function () {
      this.$refs.header.skeysearch = ''
    },
    methods: {
      prodcedetail: function (id) {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/ProduceDetail',
          query: {
            cate: thisObj.cate,
            mo_id: id
          }
        })
        window.open(routeUrl.href, '_self')
      },
      producebank: function () {
        this.catesta = !this.catesta
      },
      clearcate: function (index) {
        var curindex = this.cateList[index].ca_index
        this.cateindex[curindex] = -1
        this.cateList.splice(index, 1)
        this.catetypeList.splice(index, 1)
        this.page = 0
        this.searchgetCarList()
      },
      clearall: function () {
        for (var i = 0; i < this.cateindex.length; i++) {
          this.cateindex[i] = -1
        }
        this.cateList = []
        this.catetypeList = []
        this.page = 0
        this.searchgetCarList()
      },
      selectALL: function (item, index) {
        let thisObj = this
        thisObj.cateindex[index] = -1
        if (thisObj.cateList.length > 0) {
          for (var i = 0; i < thisObj.cateList.length; i++) {
            if (thisObj.cateList[i].ca_name === item.ca_name) {
              var namea = item.ca_english_name
              for (var key in thisObj.catetypeList[i]) {
                if (key === namea) {
                  thisObj.catetypeList.splice(i, 1)
                }
              }
            }
            if (thisObj.cateList[i].ca_index === index) {
              thisObj.cateList.splice(i, 1)
            }
          }
        }
      },
      SearchCateClick: function (item, name, id, index, indexs) {
        let thisObj = this
        thisObj.cateindex[index] = indexs
        if (thisObj.cateList.length > 0) {
          for (var i = 0; i < thisObj.cateList.length; i++) {
            if (thisObj.cateList[i].ca_name === item.ca_name) {
              thisObj.cateList[i].name = name
              var namea = item.ca_english_name
              for (var key in thisObj.catetypeList[i]) {
                if (key === namea) {
                  thisObj.catetypeList.splice(i, 1)
                }
              }
//              console.log(JSON.stringify(thisObj.catetypeList))
              thisObj.catetypeList.push({
                [namea]: id
              })
//              console.log(id)
//              console.log(JSON.stringify(thisObj.catetypeList))
              thisObj.page = 0
              thisObj.searchgetCarList()
              return false
            }
            if (thisObj.cateList[i].name === name) {
              return false
            }
          }
        }
        thisObj.cateList.push({
          name: name,
          ca_name: item.ca_name,
          ca_index: index
        })
        var names = item.ca_english_name
        thisObj.catetypeList.push({
          [names]: id
        })
        thisObj.page = 0
        thisObj.searchgetCarList()
      },
      searchgetCarList: function () {
        let thisObj = this
        if (!this.searchAjax) {
          return false
        }
        this.searchAjax = false
        thisObj.$chaos.ajax({
          data: {
            list: thisObj.catetypeList,
            limit: thisObj.limit,
            page: thisObj.page,
            label_id: thisObj.type
          },
          slient: true,
          userinfo: false,
          url: 'Car/getCarList',
          callback: function (type, res) {
            thisObj.searchAjax = true
            if (res.status === 'SUCCESS') {
              if (thisObj.page === 0) {
                thisObj.count = parseInt(res.result.count)
              }
              thisObj.searchList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      upload: function () {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/UploadAssessmentCar',
          query: {
            name: thisObj.cate
          }
        })
        window.open(routeUrl.href, '_self')
      },
      uploaddetail: function (id) {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/ProduceDetail',
          query: {
            cate: thisObj.cate
          }
        })
        window.open(routeUrl.href, '_self')
      },
      carcateclick: function (caid, index) {
        this.ca_id = caid
        this.page = 0
        this.vehicleList = []
        this.getEvaluationListAjax = true
        this.getEvaluationList()
      },
      changepage (index) {
        this.page = index - 1
        this.vehicleList = []
        this.getEvaluationListAjax = true
        this.getEvaluationList()
      },
      muClick: function (item, index) {
        let thisObj = this
        this.muindex = index
        this.letter = item
        this.getCarCateList(function () {
          thisObj.page = 0
          thisObj.vehicleList = []
          thisObj.getEvaluationListAjax = true
          thisObj.getEvaluationList()
        })
      },
      crumbLink: function (link, title) {
        if (link === '') {
          return false
        }
        let routeUrl = this.$router.resolve({
          path: link,
          query: {
            cate: title
          }
        })
        window.open(routeUrl.href, '_self')
      },
      goback: function () {
        let routeUrl = this.$router.resolve({
          path: '/'
        })
        window.open(routeUrl.href, '_self')
      },
      getSearchCateList: function () {
        let thisObj = this
        if (!thisObj.getSearchCateListAjax) {
          return false
        }
        thisObj.getSearchCateListAjax = false
        thisObj.$chaos.ajax({
          data: {
            type: thisObj.type
          },
          slient: true,
          userinfo: false,
          url: 'Car/getSearchCateList',
          callback: function (type, res) {
            thisObj.getSearchCateListAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.SearchCateList = res.result.list
              for (var i = 0; i < res.result.list.length; i++) {
                if (thisObj.cateindex[i] === 'undefined') {
                  thisObj.cateindex[i] = ''
                }
                thisObj.cateindex[i] = -1
              }
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
        thisObj.type = thisObj.$chaos.getQueryString('la_id')
        var name = thisObj.cate
        this.name = name
        var crumbs = []
        crumbs[0] = {
          title: name,
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
        thisObj.getSearchCateList()
        thisObj.searchgetCarList()
      }
    },
    watch: {
    }
  }
</script>
<style>
  .main-title span {
    font-size: 16px!important;
  }
  .nocontent{
    text-align: center;
    clear: both;
    font-size: 20px;
    color: #949494;
    overflow: hidden;
    padding-top: 60px;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
  *{
    font-family: '微软雅黑';
  }
</style>
<style scoped>
  .pruduce_k{
    cursor: pointer;
  }
  .main-body{
    padding-top:0px!important;
  }
  .pruduce_kl{
    min-height: 45px;
    margin-top:12px;
  }
  .ve_img{
    position: absolute;
    left:0px;
    top:0px;
    width: 20px!important;
    height:20px!important;
  }
  .car_li{
    padding: 12px 0px 10px;
    overflow: hidden;
  }
  .car_li>h3{display: inline-block}
  .car_li>h3>span{color: #fe6567}
  .car_li>span{
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 600;
  }
  .car_li>span:first-child{
    width:200px;
  }
  .car_li>span:nth-child(2){
    width: 200px;
  }
  .car_li>span:nth-child(3){
    width:160px;
  }
  .brand_ul2 > li > div{
    position: relative;
  }
  .hot{
    position: absolute;
    background: url("../../static/image/lt_14.png");
    width:45px;
    height: 30px;
    background-size: cover;
    color: #fff;
    text-align: center;
    font-size: 18px;
    right:0px;
    top:8px;
  }
  .pruduce_kl{overflow: hidden}
  .pruduce_kl>ul{
    margin-left: 100px;
    overflow: hidden;
  }
  .clearall{
    color: #000!important;
  }
  .pruduce_kl>ul>li>img{
    position: absolute;
    right:3px;
    top:2px;
    cursor: pointer;
  }
  .pruduce_kl>ul>li{
    float: left;
    padding: 0px 25px 15px 25px;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    margin-top:2px;
    position: relative;
    color: #528df5;
  }
  .pruduce_k,.pruduce_kl>span{
    float: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-right:20px;
  }
  .pruduce_k>img{
    padding: 10px 15px;
  }
  .pruduce_k>span,.pruduce_k>img{
    float: left;
  }
  .pruduce_kl{
  }
  .pro_kl{
    margin-top:15px;
    overflow: hidden;
  }
  .prodceli{
    overflow: hidden;
    padding: 0;
  }
  .prodceli>ul{
    margin-left:147px;
  }
  .prodceli>ul>li{
    float: left;
    padding: 0px 40px 22px 0px;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    margin-top:2px;
  }
  .prodceli>span{
    width: 112px;
    float: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 6px;
  }
  .search{
    padding: 20px;
    overflow: hidden;
    border: 1px solid #f3f3f3;
    border-radius: 10px 10px;
    box-shadow: -3px 4px 10px #f1f1f1;
    margin-bottom: 50px;
  }
  .ve_cp{
    overflow: hidden;
    margin-top:30px;
  }
  .vehicle_b>li:hover img, .vehicle_b>li.active img{
    border: 2px solid #abe8ff;
  }
  .ve_cp>li{
    float: left;
    margin-right:20px;
    color: #6d6d6d;
    font-size: 14px;
  }
  .ve_cp>li>span{
    float: left;
  }
  .ve_cp>li>ul{
    float: left;
  }
  .ve_cp li>ul>li{
    float: left;
    padding:0px 10px;
    line-height: 22px;
    border:1px solid #7790ec;
    color: #7790ec;
    text-align: center;
    margin-left:30px;
  }
  .ve_cp>li:last-child{
    float: right;
    margin-right:0px;
  }
  .vehicle_ac{
    width:480px;
    float: right;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .vehicle_a1{
    background: url("../../static/image/k_30.png");
    text-align: center;
    color: #fff;
    height: 45px;
    line-height: 50px;
    width: 198px;
    background-size: cover;
    font-size: 18px;
    float: left;
    cursor: pointer;
  }
  .vehicle_a2{
    border:1px solid #7790ec;
    text-align: center;
    color: #7790ec;
    height: 38px;
    line-height: 38px;
    width: 180px;
    font-size: 18px;
    float: right;
    margin-top:6px;
    cursor: pointer;
  }
  .brand_ul2 li{
    background: none!important;
  }
  .brand_ul2>li{
    padding-left: 0px!important;
    cursor: pointer;
    margin-bottom: 40px!important;
  }
  .brand_ul2>li:hover{
    color: #6d6d6d;
  }
  .case_p{
    margin-top:30px;
    color: #6d6d6d;
  }
  .case_p .fr{
    float: right;
  }
  .brand_ul2>li>img{
    width:350px;
    height:250px;
    float: left;
  }
  .brand_ul2>li>div{
    margin-left:380px;
    margin-top: 20px;
  }
  .brand_ul2>li h3{
    font-size: 28px;
    font-weight: 600;
  }
  .brand_ul2>li p{
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: justify;
  }
  .pageul{
    width:100%;
    text-align: center;
    overflow: hidden;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height:1700px;
  }
  .brand_service_ul>li{
    position: relative;
  }

  .topc ul li {
    cursor: pointer;
  }
  .brand_ul2>li {
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background: url(../../static/image/zx_8.png) no-repeat;
    padding-left: 33px;
    background-position: 8px 6px;
    background-size: 13px;
  }
  .brand_ul2>li h3 {
    margin-bottom: 20px;
  }
  .brand_ul2>li p {
    line-height: 33px;
    font-size: 16px;
    height:99px;
  }
  .vehicle, .vehicle_b{
    width:100%;
    clear: both;
    overflow: hidden;
  }
  .vehicle_b>li img{
    border:2px solid #4aaff7;
    width:155px;
    height:155px;
    cursor: pointer;
  }
  .vehicle_b{
    margin: 0px -12px;
  }
  .vehicle_a{
    overflow: hidden;
    margin: 0px -32px;
  }
  .vehicle_b>li p{
    text-align: center;
    margin:20px 0px;
    font-size: 18px;
    font-weight: 500;
  }
  .vehicle_b>li{
    width:216.6px;
    float: left;
    text-align: center;
  }
  .vehicle_a>li{
    width:103px;
    overflow: hidden;
    float: left;
    text-align: center;
    height:70px;
  }
  .prodceli>ul>li:hover,.prodceli>ul>li.active{
    color: #528df5;
  }
  .vehicle_a li.active span,.vehicle_a li span:hover{
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    background:url("../../static/image/p_21.png");
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    font-size: 18px;
  }
  .vehicle_a li span{
    font-size: 18px;
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    color: #000;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
  }
  .vehicle>h3{
    font-size: 18px;
    line-height: 40px;
    margin:20px 0px;
    font-weight: 600;
  }
  .main-body {
    background: url(../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
  .car-info{
    padding-top: 20px;
  }
  .car-info .right-module{
    width: 289px;
  }
  .enter-arrow-icon{
    width:6px;
    height: 11px;
    display: inline-block;
    background-image: url("../../static/image/k_20.png");
  }
  .recommend li{
    padding-bottom: 10px;
  }
  .right-module-car{
    position: relative;
  }
  .right-module-car img{
    display: block;
    width:100%;
  }
  .recommend li>a{
    display: block;
  }
  .answer_lo{
    float: left;
    width:955px;
  }
</style>
